<template>
	<div class="app-progress">
		<a-progress
			:percent="computePercent"
			:type="type"
			:strokeColor="color"
			:format="format"
			:showInfo="realShowText"
			:strokeWidth="parseInt(strokeWidth)"
		></a-progress>
	</div>
</template>
<script lang="ts" setup>
import { sliderProgressProps } from './slider-progress';
const props = defineProps(sliderProgressProps);
const format = (percentage: number) => {
	return props.value ? `${props.value}(${percentage.toFixed(0)}%)` : '';
};

const computePercent = computed(() => {
	if (props.value) {
		let tempValue = props.value === null ? 0 : parseInt(props.value);
		return ((tempValue - props.min) / (props.max - props.min)) * 100;
	}
});

const realShowText = computed(() => {
	if (props.showText) {
		if (Object.is(props.showText, 'false')) {
			return false;
		} else if (Object.is(props.showText, 'true')) {
			return true;
		} else {
			return Boolean(props.showText);
		}
	}
});
</script>
